<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏说消保金融反诈挑战</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0d47a1, #b71c1c, #0d47a1);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            width: 100%;
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
        }
        
        .header {
            background: linear-gradient(90deg, #0d47a1, #b71c1c);
            color: white;
            padding: 15px 30px;
            text-align: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .header-logo {
            height: 80px;
            width: auto;
            border-radius: 50%;
            background: white;
            padding: 5px;
            object-fit: contain;
        }
        
        .header h1 {
            font-size: 2.2rem;
            margin-bottom: 5px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .header p {
            font-size: 1.0rem;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .screen {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .screen.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .start-screen {
            text-align: center;
        }
        
        .start-screen i {
            font-size: 5rem;
            color: #0d47a1;
            margin: 20px 0;
        }
        
        .start-screen h2 {
            font-size: 2.2rem;
            color: #0d47a1;
            margin-bottom: 20px;
        }
        
        .start-screen p {
            font-size: 1.2rem;
            margin-bottom: 25px;
            line-height: 1.6;
            color: #444;
        }
        
        .btn {
            background: linear-gradient(90deg, #0d47a1, #b71c1c);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(183, 28, 28, 0.4);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(183, 28, 28, 0.6);
        }
        
        .question-container {
            margin-bottom: 30px;
        }
        
        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .question-count {
            background: #0d47a1;
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
        }
        
        .question-type {
            background: #ffd100;
            color: #0d47a1;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9rem;
            margin-left: 10px;
            font-weight: bold;
        }
        
        .timer {
            background: #b71c1c;
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
        }
        
        .question {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 25px;
            line-height: 1.4;
            color: #0d47a1;
        }
        
        .options {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .option {
            background: #f5f5f5;
            border: 2px solid #ddd;
            border-radius: 12px;
            padding: 15px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }
        
        .option:hover {
            background: #e9e9e9;
            border-color: #0d47a1;
        }
        
        .option.selected {
            background: rgba(13, 71, 161, 0.1);
            border-color: #0d47a1;
        }
        
        .option.correct {
            background: rgba(46, 204, 113, 0.2);
            border-color: #2ecc71;
        }
        
        .option.incorrect {
            background: rgba(231, 76, 60, 0.2);
            border-color: #e74c3c;
        }
        
        .option-number {
            width: 30px;
            height: 30px;
            background: #0d47a1;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            font-weight: bold;
        }
        
        .feedback {
            padding: 15px;
            border-radius: 12px;
            margin: 20px 0;
            font-size: 1.1rem;
            display: none;
        }
        
        .feedback.correct {
            background: rgba(46, 204, 113, 0.2);
            border: 2px solid #2ecc71;
            color: #27ae60;
        }
        
        .feedback.incorrect {
            background: rgba(231, 76, 60, 0.2);
            border: 2px solid #e74c3c;
            color: #c0392b;
        }
        
        .navigation {
            display: flex;
            justify-content: space-between;
        }
        
        .results-screen {
            text-align: center;
        }
        
        .results-icon {
            font-size: 6rem;
            margin: 20px 0;
        }
        
        .results-icon.good {
            color: #2ecc71;
        }
        
        .results-icon.average {
            color: #f1c40f;
        }
        
        .results-icon.poor {
            color: #e74c3c;
        }
        
        .score {
            font-size: 4rem;
            font-weight: bold;
            margin: 20px 0;
            color: #0d47a1;
        }
        
        .score-text {
            font-size: 1.8rem;
            margin-bottom: 30px;
            color: #333;
        }
        
        .summary {
            background: #f9f9f9;
            border-radius: 15px;
            padding: 20px;
            margin: 25px 0;
            text-align: left;
        }
        
        .summary h3 {
            color: #0d47a1;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .summary-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }
        
        .summary-item:last-child {
            border-bottom: none;
        }
        
        .progress-bar {
            height: 10px;
            background: #e0e0e0;
            border-radius: 5px;
            margin-top: 20px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, #0d47a1, #b71c1c);
            border-radius: 5px;
            transition: width 0.5s ease;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            color: white;
            background: rgba(0, 0, 0, 0.2);
            font-size: 0.9rem;
        }
        
        .warning-tip {
            background-color: #fff8e1;
            border-left: 5px solid #ffc107;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            text-align: left;
        }
        
        .explanation-container {
            margin-top: 20px;
            background: #f9f9f9;
            border-radius: 15px;
            padding: 20px;
        }
        
        .explanation-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .explanation-item:last-child {
            border-bottom: none;
        }
        
        .explanation-question {
            font-weight: bold;
            margin-bottom: 10px;
            color: #0d47a1;
        }
        
        .explanation-answer {
            margin-bottom: 10px;
        }
        
        .explanation-content {
            background: #eef7ff;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
        }
        
        .prevention-tip {
            background-color: #e6f7ff;
            border-left: 5px solid #0066b3;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            text-align: left;
            font-size: 1.1rem;
        }
        
        .points-container {
            background: #f0f8ff;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            text-align: center;
        }
        
        .points-value {
            font-size: 3rem;
            font-weight: bold;
            color: #0d47a1;
            margin: 10px 0;
        }
        
        .achievements-container {
            margin: 20px 0;
        }
        
        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .achievement-card {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 2px solid #ddd;
        }
        
        .achievement-card.locked {
            opacity: 0.5;
        }
        
        .achievement-card.unlocked {
            border-color: #ffd700;
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
        }
        
        .achievement-icon {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #ffd700;
        }
        
        .achievement-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .achievement-desc {
            font-size: 0.9rem;
            color: #666;
        }
        
        .new-achievement {
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        @media (max-width: 600px) {
            .header h1 {
                font-size: 1.8rem;
            }
            
            .header-logo {
                height: 60px;
            }
            
            .question {
                font-size: 1.3rem;
            }
            
            .btn {
                padding: 12px 30px;
                font-size: 1.1rem;
            }
            
            .achievements-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <!-- 用户提供的卡通风格人物Logo -->
            <img src="">
            <div>
                <h1>苏说消保金融反诈挑战</h1>
                <p>识别新型诈骗，保护财产安全</p>
            </div>
        </div>
        
        <div class="content">
            <!-- 开始界面 -->
            <div class="screen start-screen active" id="startScreen">
                <i class="fas fa-user-shield"></i>
                <h2>金融安全知识挑战</h2>
                <p>本测试包含5道关于新型金融诈骗、电信网络诈骗的识别和防范知识题目，每题限时30秒。提高您的安全意识和防范能力！</p>
                
                <div class="warning-tip">
                    <i class="fas fa-exclamation-triangle"></i> 谨记：不轻信、不透露、不转账！
                </div>
                
                <p>完成测试后，您将获得积分并解锁反诈成就！</p>
                <button class="btn" id="startBtn">
                    <i class="fas fa-shield-alt"></i> 开始挑战
                </button>
            </div>
            
            <!-- 答题界面 -->
            <div class="screen" id="quizScreen">
                <div class="question-header">
                    <div class="question-count">问题 <span id="currentQuestion">1</span>/<span id="totalQuestions">5</span></div>
                    <div class="timer"><i class="fas fa-clock"></i> <span id="timeLeft">30</span> 秒</div>
                </div>
                
                <div class="progress-bar">
                    <div class="progress" id="progressBar" style="width: 20%;"></div>
                </div>
                
                <div class="question-container">
                    <div class="question-type" id="questionType">单选题</div>
                    <div class="question" id="question">问题加载中...</div>
                    
                    <div class="options" id="options">
                        <!-- 选项通过JS动态生成 -->
                    </div>
                    
                    <div class="feedback" id="feedback">
                        <!-- 反馈信息 -->
                    </div>
                </div>
                
                <div class="navigation">
                    <button class="btn" id="prevBtn" disabled><i class="fas fa-arrow-left"></i> 上一题</button>
                    <button class="btn" id="nextBtn">下一题 <i class="fas fa-arrow-right"></i></button>
                    <button class="btn" id="submitBtn" style="display: none;">提交答案</button>
                </div>
            </div>
            
            <!-- 结果界面 -->
            <div class="screen" id="resultScreen">
                <div class="results-screen">
                    <i class="fas fa-shield-alt results-icon good" id="resultIcon"></i>
                    <div class="score" id="finalScore">0/5</div>
                    <div class="score-text" id="scoreText">安全卫士</div>
                    
                    <div class="summary">
                        <h3>防诈能力分析</h3>
                        <div class="summary-item">
                            <span>答对题数:</span>
                            <span id="correctAnswers">0/5</span>
                        </div>
                        <div class="summary-item">
                            <span>安全知识掌握度:</span>
                            <span id="correctRate">0%</span>
                        </div>
                        <div class="summary-item">
                            <span>防范意识水平:</span>
                            <span id="securityLevel">-</span>
                        </div>
                    </div>
                    
                    <div class="points-container">
                        <h3>积分系统</h3>
                        <div class="points-value" id="pointsEarned">+0</div>
                        <p>本次挑战获得积分</p>
                        <div class="points-value" id="totalPoints">0</div>
                        <p>累计总积分</p>
                    </div>
                    
                    <div class="achievements-container">
                        <h3>反诈成就</h3>
                        <div class="achievements-grid" id="achievementsGrid">
                            <!-- 成就卡片通过JS动态生成 -->
                        </div>
                    </div>
                    
                    <div class="prevention-tip">
                        <i class="fas fa-lightbulb"></i> <strong>防范建议：</strong> <span id="randomTip">建议加载中...</span>
                    </div>
                    
                    <button class="btn" id="viewExplanationBtn"><i class="fas fa-book"></i> 查看题目解析</button>
                    <button class="btn" id="restartBtn"><i class="fas fa-redo"></i> 重新挑战</button>
                </div>
            </div>
            
            <!-- 解析界面 -->
            <div class="screen" id="explanationScreen">
                <div class="results-screen">
                    <h2><i class="fas fa-book-open"></i> 题目解析</h2>
                    
                    <div class="explanation-container" id="explanationContainer">
                        <!-- 解析内容通过JS动态生成 -->
                    </div>
                    
                    <button class="btn" id="backToResultsBtn"><i class="fas fa-arrow-left"></i> 返回结果</button>
                </div>
            </div>
        </div>
        
        <div class="footer">
            苏说消保金融反诈挑战 &copy; 2025 | 提高防诈意识，守护财产安全
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 游戏状态
            const gameState = {
                currentQuestion: 0,
                score: 0,
                timePerQuestion: 30,
                timeLeft: 30,
                timer: null,
                answers: [],
                startTime: null,
                selectedQuestions: [],
                points: 0,
                achievements: [],
                completedChallenges: 0,
                totalCorrectAnswers: 0
            };
            
            // 防范建议列表
            const preventionTips = [
                "不轻信陌生来电，特别是自称公检法、银行客服的电话",
                "不透露个人信息，包括身份证号、银行卡号、验证码等",
                "不随意点击不明链接或扫描不明二维码",
                "转账前务必通过多种渠道核实对方身份",
                "定期修改密码，使用复杂密码并启用双重验证",
                "安装国家反诈中心APP，开启来电预警功能",
                "警惕高回报投资理财，谨防'杀猪盘'诈骗",
                "网购退款要通过官方渠道操作，不提供验证码",
                "不参与网络刷单、点赞赚钱等兼职活动",
                "定期检查银行账户交易记录，发现异常立即冻结账户",
                "家人朋友通过社交软件借钱，务必电话或视频核实",
                "不轻信中奖信息，特别是要求先交税或手续费的",
                "使用官方渠道下载APP，不从非官方链接下载",
                "公共WiFi不进行敏感操作，如网银交易",
                "定期更新操作系统和应用程序的安全补丁"
            ];
            
            // 成就系统
            const achievements = [
                {
                    id: "first_time",
                    title: "初次挑战",
                    description: "完成第一次挑战",
                    icon: "fas fa-star",
                    unlocked: false
                },
                {
                    id: "perfect_score",
                    title: "满分通关",
                    description: "单次挑战获得满分",
                    icon: "fas fa-trophy",
                    unlocked: false
                },
                {
                    id: "speed_runner",
                    title: "速战速决",
                    description: "所有题目在15秒内完成",
                    icon: "fas fa-bolt",
                    unlocked: false
                },
                {
                    id: "knowledge_master",
                    title: "知识大师",
                    description: "累计答对20道题",
                    icon: "fas fa-graduation-cap",
                    unlocked: false
                },
                {
                    id: "dedicated_learner",
                    title: "坚持不懈",
                    description: "完成5次挑战",
                    icon: "fas fa-medal",
                    unlocked: false
                },
                {
                    id: "security_expert",
                    title: "安全专家",
                    description: "累计获得100积分",
                    icon: "fas fa-shield-alt",
                    unlocked: false
                },
                {
                    id: "fraud_preventer",
                    title: "反诈先锋",
                    description: "完成10次挑战",
                    icon: "fas fa-user-secret",
                    unlocked: false
                },
                {
                    id: "top_performer",
                    title: "顶尖表现",
                    description: "累计获得500积分",
                    icon: "fas fa-crown",
                    unlocked: false
                }
            ];
            
            // 金融防诈题目库
            const questionBank = {
                // 30道单选题
                single: [
                    {
                        question: "收到自称银行短信，称您的账户异常需点击链接处理，您应该：",
                        options: [
                            "立即点击链接处理",
                            "拨打银行官方客服核实",
                            "直接删除短信",
                            "转发给朋友验证真伪"
                        ],
                        answer: 1,
                        explanation: "正确！银行不会通过短信发送可疑链接。遇到这种情况请直接拨打银行官方客服电话核实。",
                        category: "电信诈骗",
                        type: "单选题"
                    },
                    {
                        question: "以下哪种情况可能是'杀猪盘'诈骗？",
                        options: [
                            "陌生人自称国外富商，诱导投资虚拟货币",
                            "朋友打电话借钱",
                            "收到中奖通知",
                            "客服称商品质量有问题需退货退款"
                        ],
                        answer: 0,
                        explanation: "正确！'杀猪盘'诈骗者通常先建立感情关系，然后诱导受害者进行投资或赌博。",
                        category: "情感诈骗",
                        type: "单选题"
                    },
                    {
                        question: "接到'公检法'电话称您涉嫌洗钱，要求配合调查并转账保证金，您该怎么做？",
                        options: [
                            "立即配合转账",
                            "到公安局配合调查",
                            "挂断电话并拨打110报警",
                            "按对方要求保密并配合"
                        ],
                        answer: 2,
                        explanation: "正确！公安机关不会电话办案，更不会要求您转账。这种情况应立即拨打110报警。",
                        category: "冒充公检法",
                        type: "单选题"
                    },
                    {
                        question: "哪种支付方式最不容易被诈骗？",
                        options: [
                            "扫码支付",
                            "点击不明链接支付",
                            "直接转账给陌生人",
                            "通过正规平台交易"
                        ],
                        answer: 3,
                        explanation: "正确！通过正规交易平台支付有资金保障，是最安全的付款方式。",
                        category: "支付安全",
                        type: "单选题"
                    },
                    {
                        question: "接到自称快递公司电话，称您的包裹丢失需要退款，您该怎样做？",
                        options: [
                            "提供银行卡信息领取退款",
                            "按对方要求下载APP操作",
                            "登录官方APP或联系卖家核实",
                            "提供验证码给对方"
                        ],
                        answer: 2,
                        explanation: "正确！快递或电商退款不会要求提供银行卡信息或验证码，应通过官方渠道核实。",
                        category: "退款诈骗",
                        type: "单选题"
                    },
                    {
                        question: "某网络平台宣传'高回报、零风险'投资项目，您应该如何判断？",
                        options: [
                            "立即投资高回报项目",
                            "高回报意味着高风险，应谨慎",
                            "拉朋友一起投资分散风险",
                            "投资小金额试试"
                        ],
                        answer: 1,
                        explanation: "正确！金融诈骗常用'高回报、低风险'为诱饵，谨记所有投资都有风险。",
                        category: "金融诈骗",
                        type: "单选题"
                    },
                    {
                        question: "如何防范假冒熟人通过社交媒体借钱？",
                        options: [
                            "直接转账",
                            "进行视频或语音通话确认身份",
                            "立即询问详细情况",
                            "提供银行卡信息"
                        ],
                        answer: 1,
                        explanation: "正确！收到亲友借钱信息，务必通过视频或当面方式确认对方身份真实性。",
                        category: "社交诈骗",
                        type: "单选题"
                    },
                    {
                        question: "哪种密码设置方式最安全？",
                        options: [
                            "使用相同密码管理所有账号",
                            "设置简单易记的密码如生日",
                            "长度8位以上，包含字母、数字、符号",
                            "直接在浏览器保存密码"
                        ],
                        answer: 2,
                        explanation: "正确！安全的密码应足够长（12位以上），包含大小写字母、数字和符号组合。",
                        category: "账户安全",
                        type: "单选题"
                    },
                    {
                        question: "收到自称税务机关的电话要求补缴税款，您该怎么做？",
                        options: [
                            "立即转账缴税",
                            "到税务机关咨询",
                            "按对方要求提供个人银行信息",
                            "通过12366税务服务热线核实"
                        ],
                        answer: 3,
                        explanation: "正确！税务部门不会在电话中要求转账或提供个人银行信息，应通过官方渠道核实。",
                        category: "税务诈骗",
                        type: "单选题"
                    },
                    {
                        question: "发现被诈骗后，第一时间应该怎么做？",
                        options: [
                            "删除所有证据",
                            "上网查找解决方法",
                            "立即拨打110或96110报警",
                            "隐瞒情况不让家人知道"
                        ],
                        answer: 2,
                        explanation: "正确！发现被骗后应立即报警并冻结账户，越早报案挽回损失的可能性越大。",
                        category: "应急处置",
                        type: "单选题"
                    }
                ],
                
                // 10道多选题
                multiple: [
                    {
                        question: "哪些行为可能涉及金融诈骗？",
                        options: [
                            "陌生人要求提供银行卡信息",
                            "要求转账到安全账户",
                            "点击不明链接填写个人信息",
                            "通过正规渠道办理业务"
                        ],
                        answer: [0, 1, 2], // 正确选项索引数组
                        explanation: "正确！金融诈骗常通过要求提供银行卡信息、转账到所谓'安全账户'或点击不明链接获取个人信息。正规渠道办理业务是安全的。",
                        category: "诈骗识别",
                        type: "多选题"
                    },
                    {
                        question: "防范电信诈骗的正确做法包括：",
                        options: [
                            "不轻信陌生来电",
                            "不透露个人信息",
                            "不随意转账",
                            "安装国家反诈中心APP"
                        ],
                        answer: [0, 1, 2, 3],
                        explanation: "正确！防范电信诈骗要做到不轻信、不透露、不转账，同时安装国家反诈中心APP可有效识别和拦截诈骗电话。",
                        category: "防范措施",
                        type: "多选题"
                    },
                    {
                        question: "识别虚假投资平台的特征包括：",
                        options: [
                            "承诺高回报低风险",
                            "要求发展下线获取佣金",
                            "提供正规营业执照",
                            "使用非官方支付渠道"
                        ],
                        answer: [0, 1, 3],
                        explanation: "正确！虚假投资平台常承诺高回报低风险，要求发展下线，并使用非官方支付渠道。正规平台会提供合法营业执照。",
                        category: "投资诈骗",
                        type: "多选题"
                    },
                    {
                        question: "防范网络购物诈骗的方法包括：",
                        options: [
                            "只在正规电商平台购物",
                            "点击卖家提供的链接付款",
                            "收到退款要求时联系官方客服",
                            "提供验证码确认身份"
                        ],
                        answer: [0, 2],
                        explanation: "正确！防范网购诈骗应只在正规平台购物，收到退款要求时联系官方客服核实。切勿点击不明链接或提供验证码。",
                        category: "购物诈骗",
                        type: "多选题"
                    },
                    {
                        question: "收到陌生号码发来的'请查收合同'短信并附链接，您应该：",
                        options: [
                            "点击查看",
                            "直接删除",
                            "保存链接以备后用",
                            "转发给朋友确认"
                        ],
                        answer: [1],
                        explanation: "正确！陌生链接很可能是诈骗陷阱，应直接删除并举报垃圾短信。",
                        category: "短信诈骗",
                        type: "多选题"
                    }
                ],
                
                // 10道判断题
                judge: [
                    {
                        question: "收到中奖短信要求先交手续费才能领奖是合法的。",
                        options: ["正确", "错误"],
                        answer: 1,
                        explanation: "错误！正规中奖活动不会要求先交手续费。这是典型的'中奖诈骗'手段，切勿相信。",
                        category: "中奖诈骗",
                        type: "判断题"
                    },
                    {
                        question: "所有400开头的电话都是官方客服电话。",
                        options: ["正确", "错误"],
                        answer: 1,
                        explanation: "错误！诈骗者常伪造400号码。唯一可靠的电话是银行官网公布的客服号码。",
                        category: "客服诈骗",
                        type: "判断题"
                    },
                    {
                        question: "公检法机关会通过电话要求转账到安全账户。",
                        options: ["正确", "错误"],
                        answer: 1,
                        explanation: "错误！公检法机关不会通过电话要求转账。遇到此类情况应立即报警。",
                        category: "冒充公检法",
                        type: "判断题"
                    },
                    {
                        question: "刷单返现是合法的兼职工作。",
                        options: ["正确", "错误"],
                        answer: 1,
                        explanation: "错误！刷单行为违反电商平台规定，多数情况是诈骗陷阱。",
                        category: "兼职诈骗",
                        type: "判断题"
                    },
                    {
                        question: "接到电话称可'取消网络贷款会员'但需手续费，您应该支付手续费。",
                        options: ["正确", "错误"],
                        answer: 1,
                        explanation: "错误！正规金融机构不会收取'取消会员'费用，这是新型诈骗手段。",
                        category: "贷款诈骗",
                        type: "判断题"
                    }
                ]
            };
            
            // DOM元素
            const startScreen = document.getElementById('startScreen');
            const quizScreen = document.getElementById('quizScreen');
            const resultScreen = document.getElementById('resultScreen');
            const explanationScreen = document.getElementById('explanationScreen');
            const startBtn = document.getElementById('startBtn');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const submitBtn = document.getElementById('submitBtn');
            const restartBtn = document.getElementById('restartBtn');
            const viewExplanationBtn = document.getElementById('viewExplanationBtn');
            const backToResultsBtn = document.getElementById('backToResultsBtn');
            const questionElement = document.getElementById('question');
            const questionTypeElement = document.getElementById('questionType');
            const optionsElement = document.getElementById('options');
            const feedbackElement = document.getElementById('feedback');
            const currentQuestionElement = document.getElementById('currentQuestion');
            const totalQuestionsElement = document.getElementById('totalQuestions');
            const timeLeftElement = document.getElementById('timeLeft');
            const progressBar = document.getElementById('progressBar');
            const finalScoreElement = document.getElementById('finalScore');
            const scoreTextElement = document.getElementById('scoreText');
            const resultIcon = document.getElementById('resultIcon');
            const correctRateElement = document.getElementById('correctRate');
            const correctAnswersElement = document.getElementById('correctAnswers');
            const securityLevelElement = document.getElementById('securityLevel');
            const randomTipElement = document.getElementById('randomTip');
            const pointsEarnedElement = document.getElementById('pointsEarned');
            const totalPointsElement = document.getElementById('totalPoints');
            const achievementsGrid = document.getElementById('achievementsGrid');
            const explanationContainer = document.getElementById('explanationContainer');
            
            // 随机选择题目
            function getRandomQuestions() {
                // 随机选择3道单选题
                const shuffledSingle = [...questionBank.single].sort(() => 0.5 - Math.random());
                const selectedSingle = shuffledSingle.slice(0, 3);
                
                // 随机选择1道多选题
                const shuffledMultiple = [...questionBank.multiple].sort(() => 0.5 - Math.random());
                const selectedMultiple = shuffledMultiple.slice(0, 1);
                
                // 随机选择1道判断题
                const shuffledJudge = [...questionBank.judge].sort(() => 0.5 - Math.random());
                const selectedJudge = shuffledJudge.slice(0, 1);
                
                // 合并所有题目
                return [...selectedSingle, ...selectedMultiple, ...selectedJudge];
            }
            
            // 获取随机防范建议
            function getRandomPreventionTip() {
                const randomIndex = Math.floor(Math.random() * preventionTips.length);
                return preventionTips[randomIndex];
            }
            
            // 初始化游戏
            function initGame() {
                // 加载游戏状态
                loadGameState();
                
                // 随机选择题目
                gameState.selectedQuestions = getRandomQuestions();
                totalQuestionsElement.textContent = gameState.selectedQuestions.length;
                gameState.currentQuestion = 0;
                gameState.score = 0;
                gameState.answers = Array(gameState.selectedQuestions.length).fill(null);
                loadQuestion();
            }
            
            // 加载游戏状态
            function loadGameState() {
                const savedState = localStorage.getItem('fraudChallengeState');
                if (savedState) {
                    const parsedState = JSON.parse(savedState);
                    gameState.points = parsedState.points || 0;
                    gameState.achievements = parsedState.achievements || [];
                    gameState.completedChallenges = parsedState.completedChallenges || 0;
                    gameState.totalCorrectAnswers = parsedState.totalCorrectAnswers || 0;
                    
                    // 更新成就状态
                    achievements.forEach(achievement => {
                        achievement.unlocked = gameState.achievements.includes(achievement.id);
                    });
                }
            }
            
            // 保存游戏状态
            function saveGameState() {
                const stateToSave = {
                    points: gameState.points,
                    achievements: gameState.achievements,
                    completedChallenges: gameState.completedChallenges,
                    totalCorrectAnswers: gameState.totalCorrectAnswers
                };
                localStorage.setItem('fraudChallengeState', JSON.stringify(stateToSave));
            }
            
            // 加载问题
            function loadQuestion() {
                clearInterval(gameState.timer);
                
                const question = gameState.selectedQuestions[gameState.currentQuestion];
                questionElement.textContent = question.question;
                questionTypeElement.textContent = question.type;
                optionsElement.innerHTML = '';
                
                // 更新问题计数
                currentQuestionElement.textContent = gameState.currentQuestion + 1;
                
                // 更新进度条
                const progressPercentage = ((gameState.currentQuestion) / gameState.selectedQuestions.length) * 100;
                progressBar.style.width = `${progressPercentage}%`;
                
                // 生成选项
                question.options.forEach((option, index) => {
                    const optionElement = document.createElement('div');
                    optionElement.classList.add('option');
                    
                    const optionNumber = document.createElement('div');
                    optionNumber.classList.add('option-number');
                    optionNumber.textContent = String.fromCharCode(65 + index);
                    
                    const optionText = document.createElement('div');
                    optionText.classList.add('option-text');
                    optionText.textContent = option;
                    
                    optionElement.appendChild(optionNumber);
                    optionElement.appendChild(optionText);
                    
                    optionElement.addEventListener('click', () => selectOption(index));
                    
                    // 如果之前已经选择过，恢复选择状态
                    if (Array.isArray(gameState.answers[gameState.currentQuestion]) && 
                        gameState.answers[gameState.currentQuestion].includes(index)) {
                        optionElement.classList.add('selected');
                    } else if (gameState.answers[gameState.currentQuestion] === index) {
                        optionElement.classList.add('selected');
                    }
                    
                    optionsElement.appendChild(optionElement);
                });
                
                // 更新按钮状态
                prevBtn.disabled = gameState.currentQuestion === 0;
                nextBtn.disabled = false;
                submitBtn.style.display = gameState.currentQuestion === gameState.selectedQuestions.length - 1 ? 'block' : 'none';
                nextBtn.style.display = gameState.currentQuestion === gameState.selectedQuestions.length - 1 ? 'none' : 'block';
                
                // 重置反馈
                feedbackElement.style.display = 'none';
                feedbackElement.textContent = '';
                feedbackElement.className = 'feedback';
                
                // 启动计时器
                gameState.timeLeft = gameState.timePerQuestion;
                timeLeftElement.textContent = gameState.timeLeft;
                startTimer();
            }
            
            // 开始计时器
            function startTimer() {
                clearInterval(gameState.timer);
                gameState.timer = setInterval(() => {
                    gameState.timeLeft--;
                    timeLeftElement.textContent = gameState.timeLeft;
                    
                    if (gameState.timeLeft <= 0) {
                        clearInterval(gameState.timer);
                        feedbackElement.textContent = "时间到！";
                        feedbackElement.classList.remove('correct', 'incorrect');
                        feedbackElement.style.display = 'block';
                        setTimeout(() => {
                            if (gameState.currentQuestion < gameState.selectedQuestions.length - 1) {
                                nextQuestion();
                            } else {
                                submitQuiz();
                            }
                        }, 1500);
                    }
                }, 1000);
            }
            
            // 选择选项
            function selectOption(optionIndex) {
                const question = gameState.selectedQuestions[gameState.currentQuestion];
                
                // 多选题处理
                if (question.type === "多选题") {
                    // 初始化答案数组
                    if (!Array.isArray(gameState.answers[gameState.currentQuestion])) {
                        gameState.answers[gameState.currentQuestion] = [];
                    }
                    
                    // 切换选择状态
                    const optionElement = document.querySelectorAll('.option')[optionIndex];
                    const isSelected = optionElement.classList.contains('selected');
                    
                    if (isSelected) {
                        optionElement.classList.remove('selected');
                        // 从数组中移除选项
                        gameState.answers[gameState.currentQuestion] = gameState.answers[gameState.currentQuestion]
                            .filter(idx => idx !== optionIndex);
                    } else {
                        optionElement.classList.add('selected');
                        // 添加到数组
                        gameState.answers[gameState.currentQuestion].push(optionIndex);
                    }
                } 
                // 单选题和判断题处理
                else {
                    // 移除之前的选择
                    document.querySelectorAll('.option').forEach(option => {
                        option.classList.remove('selected');
                    });
                    
                    // 标记当前选择
                    const selectedOption = document.querySelectorAll('.option')[optionIndex];
                    selectedOption.classList.add('selected');
                    
                    // 保存答案
                    gameState.answers[gameState.currentQuestion] = optionIndex;
                }
                
                // 如果是最后一题，显示提交按钮
                if (gameState.currentQuestion === gameState.selectedQuestions.length - 1) {
                    submitBtn.style.display = 'block';
                    nextBtn.style.display = 'none';
                }
            }
            
            // 下一题
            function nextQuestion() {
                if (gameState.currentQuestion < gameState.selectedQuestions.length - 1) {
                    gameState.currentQuestion++;
                    loadQuestion();
                }
            }
            
            // 上一题
            function prevQuestion() {
                if (gameState.currentQuestion > 0) {
                    gameState.currentQuestion--;
                    loadQuestion();
                }
            }
            
            // 提交答案
            function submitQuiz() {
                clearInterval(gameState.timer);
                
                // 计算得分
                gameState.score = 0;
                gameState.answers.forEach((answer, index) => {
                    const question = gameState.selectedQuestions[index];
                    
                    // 多选题计分
                    if (question.type === "多选题") {
                        if (Array.isArray(answer) && 
                            answer.length === question.answer.length &&
                            answer.every(val => question.answer.includes(val))) {
                            gameState.score++;
                        }
                    } 
                    // 单选题和判断题计分
                    else {
                        if (answer === question.answer) {
                            gameState.score++;
                        }
                    }
                });
                
                // 更新挑战次数
                gameState.completedChallenges++;
                
                // 更新总答对题数
                gameState.totalCorrectAnswers += gameState.score;
                
                // 计算积分
                const pointsEarned = gameState.score * 10;
                gameState.points += pointsEarned;
                
                // 检查成就
                const newAchievements = checkAchievements(pointsEarned);
                
                // 保存游戏状态
                saveGameState();
                
                // 显示结果屏幕
                showResults(pointsEarned, newAchievements);
            }
            
            // 检查成就
            function checkAchievements(pointsEarned) {
                const newAchievements = [];
                
                // 初次挑战成就
                if (gameState.completedChallenges === 1 && !gameState.achievements.includes("first_time")) {
                    gameState.achievements.push("first_time");
                    newAchievements.push("first_time");
                }
                
                // 满分通关成就
                if (gameState.score === gameState.selectedQuestions.length && !gameState.achievements.includes("perfect_score")) {
                    gameState.achievements.push("perfect_score");
                    newAchievements.push("perfect_score");
                }
                
                // 知识大师成就（累计答对20题）
                if (gameState.totalCorrectAnswers >= 20 && !gameState.achievements.includes("knowledge_master")) {
                    gameState.achievements.push("knowledge_master");
                    newAchievements.push("knowledge_master");
                }
                
                // 坚持不懈成就（完成5次挑战）
                if (gameState.completedChallenges >= 5 && !gameState.achievements.includes("dedicated_learner")) {
                    gameState.achievements.push("dedicated_learner");
                    newAchievements.push("dedicated_learner");
                }
                
                // 安全专家成就（累计获得100积分）
                if (gameState.points >= 100 && !gameState.achievements.includes("security_expert")) {
                    gameState.achievements.push("security_expert");
                    newAchievements.push("security_expert");
                }
                
                // 反诈先锋成就（完成10次挑战）
                if (gameState.completedChallenges >= 10 && !gameState.achievements.includes("fraud_preventer")) {
                    gameState.achievements.push("fraud_preventer");
                    newAchievements.push("fraud_preventer");
                }
                
                // 顶尖表现成就（累计获得500积分）
                if (gameState.points >= 500 && !gameState.achievements.includes("top_performer")) {
                    gameState.achievements.push("top_performer");
                    newAchievements.push("top_performer");
                }
                
                return newAchievements;
            }
            
            // 显示结果
            function showResults(pointsEarned, newAchievements) {
                const scorePercentage = Math.round((gameState.score / gameState.selectedQuestions.length) * 100);
                finalScoreElement.textContent = `${gameState.score}/${gameState.selectedQuestions.length}`;
                correctAnswersElement.textContent = `${gameState.score}/${gameState.selectedQuestions.length}`;
                correctRateElement.textContent = `${scorePercentage}%`;
                
                // 设置结果文本和图标
                if (scorePercentage >= 80) {
                    scoreTextElement.textContent = "防诈专家！";
                    securityLevelElement.textContent = "非常高";
                    resultIcon.className = "fas fa-shield-alt results-icon good";
                } else if (scorePercentage >= 60) {
                    scoreTextElement.textContent = "安全卫士";
                    securityLevelElement.textContent = "良好";
                    resultIcon.className = "fas fa-shield-alt results-icon average";
                } else if (scorePercentage >= 40) {
                    scoreTextElement.textContent = "安全意识中等";
                    securityLevelElement.textContent = "中等";
                    resultIcon.className = "fas fa-shield-alt results-icon average";
                } else {
                    scoreTextElement.textContent = "需提高防范意识";
                    securityLevelElement.textContent = "需加强";
                    resultIcon.className = "fas fa-shield-alt results-icon poor";
                }
                
                // 显示积分
                pointsEarnedElement.textContent = `+${pointsEarned}`;
                totalPointsElement.textContent = gameState.points;
                
                // 显示随机防范建议
                randomTipElement.textContent = getRandomPreventionTip();
                
                // 显示成就
                renderAchievements(newAchievements);
                
                // 切换到结果屏幕
                quizScreen.classList.remove('active');
                resultScreen.classList.add('active');
            }
            
            // 渲染成就
            function renderAchievements(newAchievements = []) {
                achievementsGrid.innerHTML = '';
                
                achievements.forEach(achievement => {
                    const achievementCard = document.createElement('div');
                    achievementCard.classList.add('achievement-card');
                    
                    if (gameState.achievements.includes(achievement.id)) {
                        achievementCard.classList.add('unlocked');
                        if (newAchievements.includes(achievement.id)) {
                            achievementCard.classList.add('new-achievement');
                        }
                    } else {
                        achievementCard.classList.add('locked');
                    }
                    
                    achievementCard.innerHTML = `
                        <div class="achievement-icon">
                            <i class="${achievement.icon}"></i>
                        </div>
                        <div class="achievement-title">${achievement.title}</div>
                        <div class="achievement-desc">${achievement.description}</div>
                    `;
                    
                    achievementsGrid.appendChild(achievementCard);
                });
            }
            
            // 显示解析
            function showExplanations() {
                explanationContainer.innerHTML = '';
                
                gameState.selectedQuestions.forEach((question, index) => {
                    const explanationItem = document.createElement('div');
                    explanationItem.classList.add('explanation-item');
                    
                    const questionElement = document.createElement('div');
                    questionElement.classList.add('explanation-question');
                    questionElement.textContent = `${index + 1}. ${question.question}`;
                    
                    const answerElement = document.createElement('div');
                    answerElement.classList.add('explanation-answer');
                    
                    // 获取用户答案
                    let userAnswer = gameState.answers[index];
                    let userAnswerText = '';
                    
                    if (Array.isArray(userAnswer)) {
                        userAnswerText = userAnswer.map(idx => String.fromCharCode(65 + idx)).join(', ');
                    } else if (typeof userAnswer === 'number') {
                        userAnswerText = String.fromCharCode(65 + userAnswer);
                    }
                    
                    // 获取正确答案
                    let correctAnswerText = '';
                    
                    if (Array.isArray(question.answer)) {
                        correctAnswerText = question.answer.map(idx => String.fromCharCode(65 + idx)).join(', ');
                    } else {
                        correctAnswerText = String.fromCharCode(65 + question.answer);
                    }
                    
                    answerElement.innerHTML = `
                        <strong>您的答案:</strong> ${userAnswerText || '未作答'}
                        <br>
                        <strong>正确答案:</strong> ${correctAnswerText}
                    `;
                    
                    const explanationContent = document.createElement('div');
                    explanationContent.classList.add('explanation-content');
                    explanationContent.textContent = question.explanation;
                    
                    explanationItem.appendChild(questionElement);
                    explanationItem.appendChild(answerElement);
                    explanationItem.appendChild(explanationContent);
                    
                    explanationContainer.appendChild(explanationItem);
                });
                
                resultScreen.classList.remove('active');
                explanationScreen.classList.add('active');
            }
            
            // 事件监听
            startBtn.addEventListener('click', () => {
                startScreen.classList.remove('active');
                quizScreen.classList.add('active');
                initGame();
            });
            
            nextBtn.addEventListener('click', nextQuestion);
            prevBtn.addEventListener('click', prevQuestion);
            submitBtn.addEventListener('click', submitQuiz);
            restartBtn.addEventListener('click', () => {
                resultScreen.classList.remove('active');
                startScreen.classList.add('active');
            });
            
            viewExplanationBtn.addEventListener('click', showExplanations);
            backToResultsBtn.addEventListener('click', () => {
                explanationScreen.classList.remove('active');
                resultScreen.classList.add('active');
            });
        });
    </script>
</body>
</html>